<template>
  <div class="container">
    <div id="vue-three"></div>
  </div>
</template>

<script>
import * as THREE from 'three'

export default {
  data () {
    return {}
  },
  methods: {
    //构建虚拟场景
    initThree () {
      //场景
      var scene = new THREE.Scene()

      // 透视相机(// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面)
      var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 2000)
      // camera.position.z = 5//position：相机位置xyz坐标：200, 200, 200
      camera.position.set(10.0, -20, 13)
      camera.up.set(0, 0, 1)
      camera.lookAt(new THREE.Vector3(0, 0, 0))

      // 渲染器
      var renderer = new THREE.WebGLRenderer()
      renderer.setSize(window.innerWidth, window.innerHeight)
      let dom = document.getElementById('vue-three')
      dom.appendChild(renderer.domElement)//添加进页面

      // AxesHelper：辅助观察的坐标系
      const axesHelper = new THREE.AxesHelper(150)
      scene.add(axesHelper)

      //网格线绘制
      var grid = new THREE.GridHelper(24, 24, 0xFF0000, 0x444444)
      grid.material.opacity = 0.4
      grid.material.transparent = true
      grid.rotation.x = Math.PI / 2.0
      scene.add(grid)

      // 材质
      const material = new THREE.MeshBasicMaterial({
        color: 0x0000ff, //设置材质颜色
        transparent: true,//开启透明
        opacity: 0.5,//设置透明度
      })

      // 设置几何体长宽高，也就是x、y、z三个方向的尺寸
      //对比三个参数分别对应xyz轴哪个方向
      var geometry = new THREE.BoxGeometry(2, 2, 2)

      //点光源：两个参数分别表示光源颜色和光照强度
      // 参数1：0xffffff是纯白光,表示光源颜色
      // 参数2：1.0,表示光照强度，可以根据需要调整
      const pointLight = new THREE.PointLight(0xffffff, 1.0)
      pointLight.decay = 0.0//设置光源不随距离衰减
      pointLight.position.set(400, 200, 300) //点光源放在x轴上
      scene.add(pointLight)

      // 物体
      var cube = new THREE.Mesh(geometry, material)
      scene.add(cube)

      function animate () {
        requestAnimationFrame(animate)
        cube.rotation.x += 0.01
        cube.rotation.y += 0.01
        renderer.render(scene, camera)
      }

      animate()
    },
  },
  mounted () {
    this.initThree()
  }

}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
}

#vue-three {
  position: relative;
}
</style>


